<template>
  <h1>购物商城</h1>
  <input type="text" id="search" v-model="searchQuery" placeholder="请输入商品名称">
  <ul>
    <li v-for="product in filteredProducts" :key = "product.id">
        <h2>{{ product.name }}</h2>
        <p>价格：￥{{ product.price }}</p>
        <p>库存：{{ product.stock }}</p>
        <button @click="addToCart(product)" :disabled="product.stock === 0">加入购物车</button>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
          products: [
              { id: 1, name: 'iPhone 15', price: 5999, stock: 10 },
              { id: 2, name: 'MacBook Pro', price: 12999, stock: 5 },
          ],
          cart: [],
          searchQuery: ''
      };
    },
    computed: {
        filteredProducts() {
            return this.products.filter(product => product.name.toLowerCase().includes(this.searchQuery.toLowerCase()))
        }
    },
    methods: {
        addToCart(product) {
            this.cart.push(product)
            product.stock--
        }
    }
  }

</script>
